<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>测试内容</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../css/basic.css">
    <link rel="stylesheet" href="../layui/css/layui.css" media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
    <script src="../layui/layui.js" charset="utf-8"></script>
    <style type="text/css">
        div ul li {
            border-radius: 25px;    
        }

        .layui-form-label {
            width: 130px;
        }
    </style>
</head>

<body>
    <p style="display: inline-block; color: deepskyblue; font-size: 24px;">学生第一党支部</p>
    <table class="layui-hide" id="stuFirst" lay-filter="stuFirst"></table>

    <div class="layui-tab layui-tab-card" style="display:none" id="itemAll">
        <ul class="layui-tab-title">
            <li class="layui-this">党支部详细信息</li>
            <li>党组织班子成员</li>
            <li>党组织奖惩信息</li>
            <li>党组织关联单位</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show" style="margin:0 auto">
                <form action="" class="layui-form layui-row" style="margin-top:20px;">

                    <div class="layui-col-md4" style="margin-left:15%">
                        <div class="layui-form-item">
                            <label class="layui-form-label">管理员</label>
                            <div class="layui-input-inline">
                                <input type="text" name="" placeholder="" autocomplete="off" class="layui-input" value="party3">
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">密码</label>
                            <div class="layui-input-inline">
                                <input type="text" name="" placeholder="" autocomplete="off" class="layui-input" value="333">
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">党组织代码</label>
                            <div class="layui-input-inline">
                                <input type="text" name="" placeholder="" autocomplete="off" class="layui-input" value="1921.7.1.3">
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">党组织名称</label>
                            <div class="layui-input-inline">
                                <input type="text" name="" placeholder="" autocomplete="off" class="layui-input" value="学生第一党支部">
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">党组织类别</label>
                            <div class="layui-input-inline">
                                <input type="text" name="" placeholder="" autocomplete="off" class="layui-input" value="党支部">
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">党组织属地关系</label>
                            <div class="layui-input-inline">
                                <input type="text" name="" placeholder="" autocomplete="off" class="layui-input" value="软件学院">
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">领导班子当选日起</label>
                            <div class="layui-input-inline">
                                <input type="text" name="" class="layui-input" id="Time1">
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">本届届满日期</label>
                            <div class="layui-input-inline">
                                <input type="text" name="" class="layui-input" id="Time1">
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">选举方式</label>
                            <div class="layui-input-inline">
                                <input type="text" name="" placeholder="" autocomplete="off" class="layui-input" value="票选">
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">选举应到会人数</label>
                            <div class="layui-input-inline">
                                <input type="text" name="" placeholder="" autocomplete="off" class="layui-input" value="100">
                            </div>
                        </div>
                    </div>


                    <div class="layui-col-md4">


                        <div class="layui-form-item">
                            <label class="layui-form-label">选举实到会人数</label>
                            <div class="layui-input-inline">
                                <input type="text" name="" placeholder="" autocomplete="off" class="layui-input" value="100">
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">批准建立党组织日期</label>
                            <div class="layui-input-inline">
                                <input type="text" name="" class="layui-input" id="Time1">
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">开展评议日期</label>
                            <div class="layui-input-inline">
                                <input type="text" name="" class="layui-input" id="Time1">
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">结束评议日期</label>
                            <div class="layui-input-inline">
                                <input type="text" name="" class="layui-input" id="Time1">
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">通讯地址</label>
                            <div class="layui-input-inline">
                                <input type="text" name="" placeholder="" autocomplete="off" class="layui-input" value="">
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">邮政编码</label>
                            <div class="layui-input-inline">
                                <input type="email" name="" placeholder="" autocomplete="off" class="layui-input" value="">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">联系电话</label>
                            <div class="layui-input-inline">
                                <input type="text" name="" placeholder="" autocomplete="off" class="layui-input" value="">
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">传真电话</label>
                            <div class="layui-input-inline">
                                <input type="text" name="" placeholder="" autocomplete="off" class="layui-input" value="">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">备注</label>
                            <div class="layui-input-inline">
                                <input type="text" name="" placeholder="" autocomplete="off" class="layui-input" value="">
                            </div>
                        </div>

                    </div>

                    <!-- <div class="layui-form-item">
                                    <label class="layui-form-label">信息类别</label>
                                    <div class="layui-input-inline">
                                      <label>信息详情</label>
                                    </div>
                                  </div> -->
                    <div class="layui-form-item" style="float:right">
                        <div class="layui-input-inline">
                            <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
                </form>
            </div>
            <div class="layui-tab-item">
                <table class="layui-hide" id="partyNumber"></table>
                <div class="layui-btn-container">
                    <a class="layui-btn" lay-event="add1" id="add1">添加</a>
                    <a class="layui-btn" lay-event="del1" id="del1">删除</a>
                    <a class="layui-btn" lay-event="reset1" id="reset1">修改</a>
                </div>
            </div>
            <div class="layui-tab-item">
                <table class="layui-hide" id="partyPrice"></table>
                <div class="layui-btn-container">
                    <a class="layui-btn" lay-event="add2" id="add2">添加</a>
                    <a class="layui-btn" lay-event="del2" id="del2">删除</a>
                    <a class="layui-btn" lay-event="reset2" id="reset2">修改</a>
                </div>
            </div>
            <div class="layui-tab-item">
                <table class="layui-hide" id="partyCon"></table>
                <div class="layui-btn-container">
                    <a class="layui-btn" lay-event="add3" id="add3">添加</a>
                    <a class="layui-btn" lay-event="del3" id="del3">删除</a>
                    <a class="layui-btn" lay-event="reset3" id="reset3">修改</a>
                </div>
            </div>
        </div>
    </div>
</body>
<!--党组织班子成员-->
<form action="" class="bs-hidden layui-form" lay-filter="f1" id="f1" style="margin: 0 auto;margin-top: 3%;margin-left: 22%">
    <div class="layui-form-item">
        <label class="layui-form-label">姓名</label>
        <div class="layui-input-inline">
            <input type="text" name="" placeholder="" autocomplete="off" class="layui-input" value="party3">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">所在党支部</label>
        <div class="layui-input-inline">
            <input type="text" name="" placeholder="" autocomplete="off" class="layui-input" value="party3">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">职务名称</label>
        <div class="layui-input-inline">
            <input type="text" name="" placeholder="" autocomplete="off" class="layui-input" value="party3">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">职务级别</label>
        <div class="layui-input-inline">
            <input type="text" name="" placeholder="" autocomplete="off" class="layui-input" value="party3">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">批准任职日期</label>
        <div class="layui-input-inline">
            <input type="text" class="layui-input" id="Time1">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">批准免职日期</label>
        <div class="layui-input-inline">
            <input type="text" class="layui-input" id="Time1">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">是否班子成员</label>
        <div class="layui-input-inline">
            <input type="radio" name="sex" value="是" title="是">
            <input type="radio" name="sex" value="否" title="否" checked>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-inline" style="margin-left:20%">
            <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<!--党组织奖惩信息-->
<form action="" class="bs-hidden layui-form" lay-filter="f2" id="f2" style="margin: 0 auto;margin-top: 3%;margin-left: 22%">

    <div class="layui-form-item">
        <label class="layui-form-label">奖惩名称</label>
        <div class="layui-input-inline">
            <input type="text" name="" placeholder="" autocomplete="off" class="layui-input" value="party3">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">奖惩说明</label>
        <div class="layui-input-inline">
            <input type="text" name="" placeholder="" autocomplete="off" class="layui-input" value="party3">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">奖惩日期</label>
        <div class="layui-input-inline">
            <input type="text" class="layui-input" id="Time1">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">批准奖惩组织</label>
        <div class="layui-input-inline">
            <input type="text" name="" placeholder="" autocomplete="off" class="layui-input" value="party3">
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-inline" style="margin-left:20%">
            <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<!--党组织关联单位-->
<form action="" class="bs-hidden layui-form" lay-filter="f3" id="f3" style="margin: 0 auto;margin-top: 3%;margin-left: 22%">


    <div class="layui-form-item">
        <label class="layui-form-label">单位名称</label>
        <div class="layui-input-inline">
            <input type="text" name="" placeholder="" autocomplete="off" class="layui-input" value="party3">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">单位性质</label>
        <div class="layui-input-inline">
            <input type="text" name="" placeholder="" autocomplete="off" class="layui-input" value="party3">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">单位行业</label>
        <div class="layui-input-inline">
            <input type="text" name="" placeholder="" autocomplete="off" class="layui-input" value="party3">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">经济类型</label>
        <div class="layui-input-inline">
            <input type="text" name="" placeholder="" autocomplete="off" class="layui-input" value="party3">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">企业类型</label>
        <div class="layui-input-inline">
            <input type="text" name="" placeholder="" autocomplete="off" class="layui-input" value="party3">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">企业规模</label>
        <div class="layui-input-inline">
            <input type="text" name="" placeholder="" autocomplete="off" class="layui-input" value="party3">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">在职岗位</label>
        <div class="layui-input-inline">
            <input type="text" name="" placeholder="" autocomplete="off" class="layui-input" value="party3">
        </div>
    </div>
    <div class="layui-form-item" style="margin-left:20%">
        <div class="layui-input-inline">
            <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>


<script type="text/html" id="ipts">
    <a class="layui-btn layui-btn-xs" lay-event="detail">详情</a>
    </script>
<script>
    layui.use(['table', 'layer', 'jquery', 'element', 'laydate', 'form'], function () {
        var table = layui.table;
        var layer = layui.layer;
        var $ = layui.jquery;
        var element = layui.element;
        var laydate = layui.laydate;
        var form = layui.form;
        //监听提交
        form.on('submit(formDemo)', function (data) {
            return false;
        });
        //执行一个laydate实例
        laydate.render({
            elem: '#Time1' //指定元素
        });
        //展示已知数据
        table.render({
            elem: '#stuFirst',
            cols: [
                [ //标题栏
                    {
                        type: 'checkbox',
                        width: "5%",
                    }, {
                        field: 'PartyName',
                        title: '党组织名称',
                        width: "15%",
                        align: "center"

                    }, {
                        field: 'PartyId',
                        title: '党组织代码',
                        width: "10%",
                        align: "center"

                    }, {
                        field: 'PartyType',
                        title: '党组织类别',
                        width: "8.5%",
                        align: "center"
                    }, {
                        field: 'PartyAddress',
                        title: '党组织属地',
                        width: "8.5%",
                        align: "center"
                    }, {
                        field: 'LeaderDate',
                        title: '领导班子当选日期',
                        width: "14%",
                        align: "center"
                    }, {
                        field: 'EndDate',
                        title: '本届届满日期',
                        width: "10%",
                        align: "center"
                    }, {
                        field: 'CreateDate',
                        title: '批准建立党组织日期',
                        width: "14%",
                        align: "center"
                    }, {
                        field: 'UserName',
                        title: '管理员',
                        width: "10%",
                        align: "center"
                    }, {
                        field: 'btn',
                        title: '操作',
                        width: "5%",
                        align: "center",
                        toolbar: "#ipts"
                    }
                ]
            ],
            page: false,
            data: [{
                    "PartyName": "学生第一党支部",
                    "PartyId": "1921.7.1.3",
                    "PartyType": "党支部",
                    "PartyAddress": "软件学院",
                    "LeaderDate": "",
                    "EndDate": "",
                    "CreateDate": "",
                    "UserName": "王大锤",
                }]
                //,skin: 'line' //表格风格
                ,
            even: true
        });
        //党组织班子成员
        table.render({
            elem: '#partyNumber',
            cols: [
                [ //标题栏
                    {
                        type: 'checkbox',
                        width: "5%",
                    }, {
                        field: 'PartyName',
                        title: '姓名',
                        width: "15%",
                        align: "center"

                    }, {
                        field: 'PartyId',
                        title: '所在党支部',
                        width: "10%",
                        align: "center"

                    }, {
                        field: 'PartyType',
                        title: '职务名称',
                        width: "10%",
                        align: "center"
                    }, {
                        field: 'PartyAddress',
                        title: '职务说明',
                        width: "10%",
                        align: "center"
                    }, {
                        field: 'LeaderDate',
                        title: '职务级别',
                        width: "10%",
                        align: "center"
                    }, {
                        field: 'EndDate',
                        title: '批准任职日期',
                        width: "14%",
                        align: "center"
                    }, {
                        field: 'CreateDate',
                        title: '批准免职日期',
                        width: "14%",
                        align: "center"
                    }, {
                        field: 'UserName',
                        title: '班子成员',
                        width: "10%",
                        align: "center"
                    }
                ]
            ],
            page: false,
            data: [{
                    "PartyName": "学生第一党支部",
                    "PartyId": "1921.7.1.3",
                    "PartyType": "党支部",
                    "PartyAddress": "软件学院",
                    "LeaderDate": "",
                    "EndDate": "",
                    "CreateDate": "",
                    "UserName": "王大锤",
                }, {
                    "PartyName": "学生第一党支部",
                    "PartyId": "1921.7.1.3",
                    "PartyType": "党支部",
                    "PartyAddress": "软件学院",
                    "LeaderDate": "",
                    "EndDate": "",
                    "CreateDate": "",
                    "UserName": "王大锤",
                }, {
                    "PartyName": "学生第一党支部",
                    "PartyId": "1921.7.1.3",
                    "PartyType": "党支部",
                    "PartyAddress": "软件学院",
                    "LeaderDate": "",
                    "EndDate": "",
                    "CreateDate": "",
                    "UserName": "王大锤",
                }]
                //,skin: 'line' //表格风格
                ,
            even: true
        });
        //党组织奖惩信息
        table.render({
            elem: '#partyPrice',
            cols: [
                [ //标题栏
                    {
                        type: 'checkbox',
                        width: "6.5%",
                    }, {
                        field: 'PartyName',
                        title: '奖惩名称',
                        width: "23%",
                        align: "center"

                    }, {
                        field: 'PartyId',
                        title: '奖惩说明',
                        width: "23%",
                        align: "center"

                    }, {
                        field: 'PartyType',
                        title: '奖惩日期',
                        width: "23%",
                        align: "center"
                    }, {
                        field: 'PartyAddress',
                        title: '批准奖惩组织',
                        width: "23%",
                        align: "center"
                    }
                ]
            ],
            page: false,
            data: [{
                    "PartyName": "学生第一党支部",
                    "PartyId": "1921.7.1.3",
                    "PartyType": "党支部",
                    "PartyAddress": "软件学院"
                }, {
                    "PartyName": "学生第一党支部",
                    "PartyId": "1921.7.1.3",
                    "PartyType": "党支部",
                    "PartyAddress": "软件学院"
                }, {
                    "PartyName": "学生第一党支部",
                    "PartyId": "1921.7.1.3",
                    "PartyType": "党支部",
                    "PartyAddress": "软件学院"
                }]
                //,skin: 'line' //表格风格
                ,
            even: true
        });
        //党组织关联单位
        table.render({
            elem: '#partyCon',
            cols: [
                [ //标题栏
                    {
                        type: 'checkbox',
                        width: "5%",
                    }, {
                        field: 'PartyName',
                        title: '单位名称',
                        width: "15%",
                        align: "center"

                    }, {
                        field: 'PartyId',
                        title: '单位性质',
                        width: "10%",
                        align: "center"

                    }, {
                        field: 'PartyType',
                        title: '单位行业',
                        width: "10%",
                        align: "center"
                    }, {
                        field: 'PartyAddress',
                        title: '经济类型',
                        width: "14%",
                        align: "center"
                    }, {
                        field: 'LeaderDate',
                        title: '企业类型',
                        width: "14%",
                        align: "center"
                    }, {
                        field: 'EndDate',
                        title: '企业规模',
                        width: "15%",
                        align: "center"
                    }, {
                        field: 'CreateDate',
                        title: '在职岗工',
                        width: "15%",
                        align: "center"
                    }
                ]
            ],
            page: false,
            data: [{
                    "PartyName": "创业",
                    "PartyId": "",
                    "PartyType": "",
                    "PartyAddress": "",
                    "LeaderDate": "",
                    "EndDate": "",
                    "CreateDate": "",
                }, {
                    "PartyName": "创业",
                    "PartyId": "",
                    "PartyType": "",
                    "PartyAddress": "",
                    "LeaderDate": "",
                    "EndDate": "",
                    "CreateDate": "",
                }, {
                    "PartyName": "创业",
                    "PartyId": "",
                    "PartyType": "",
                    "PartyAddress": "",
                    "LeaderDate": "",
                    "EndDate": "",
                    "CreateDate": "",
                }, {
                    "PartyName": "创业",
                    "PartyId": "",
                    "PartyType": "",
                    "PartyAddress": "",
                    "LeaderDate": "",
                    "EndDate": "",
                    "CreateDate": "",
                }]
                //,skin: 'line' //表格风格
                ,
            even: true
        });

        table.on('tool(stuFirst)', function (obj) {
            var event = obj.event;
            var that = $(this);
            if (event === 'detail') {
                layer.open({
                    type: 1,
                    area: ['100%', '100%'],
                    content: $('#itemAll') //这里content是一个普通的String
                });
            }
        });



        $('#add1').click(function () {
            layer.open({
                title: '添加信息',
                type: 1,
                content: $('#f1'),
                area: ['800px', '500px'],
            });
        });

        $('#del1').click(function () {
            layer.open({
                type: 1,
                closeBtn: 0,
                title: "提示信息",
                content: "<span style='font-size:20px; margin-left:40px'>" + "真的要删除么？" +
                    "</span>",
                area: ['200px', '150px'],
                btn: ['确定', '取消'],
                btnAlign: 'c',
                yes: function (index, layero) {
                    layer.msg('删除成功！');
                    layer.close(index);
                },
                btn2: function (index, layero) {
                    layer.close(index);
                    return false;
                }
            })
        });

        $('#reset1').click(function () {
            layer.open({
                title: '添加信息',
                type: 1,
                content: $('#f1'),
                area: ['800px', '500px'],
            });
        });

        $('#add2').click(function () {
            layer.open({
                title: '添加信息',
                type: 1,
                content: $('#f2'),
                area: ['800px', '350px'],
            });
        });

        $('#del2').click(function () {
            layer.open({
                type: 1,
                closeBtn: 0,
                title: "提示信息",
                content: "<span style='font-size:20px; margin-left:40px'>" + "真的要删除么？" +
                    "</span>",
                area: ['200px', '150px'],
                btn: ['确定', '取消'],
                btnAlign: 'c',
                yes: function (index, layero) {
                    layer.msg('删除成功！');
                    layer.close(index);
                },
                btn2: function (index, layero) {
                    layer.close(index);
                    return false;
                }
            })
        });

        $('#reset2').click(function () {
            layer.open({
                title: '添加信息',
                type: 1,
                content: $('#f2'),
                area: ['800px', '350px'],
            });
        });



        $('#add3').click(function () {
            layer.open({
                title: '添加信息',
                type: 1,
                content: $('#f3'),
                area: ['800px', '500px'],
            });
        });

        $('#del3').click(function () {
            layer.open({
                type: 1,
                closeBtn: 0,
                title: "提示信息",
                content: "<span style='font-size:20px; margin-left:40px'>" + "真的要删除么？" +
                    "</span>",
                area: ['200px', '150px'],
                btn: ['确定', '取消'],
                btnAlign: 'c',
                yes: function (index, layero) {
                    layer.msg('删除成功！');
                    layer.close(index);
                },
                btn2: function (index, layero) {
                    layer.close(index);
                    return false;
                }
            })
        });

        $('#reset3').click(function () {
            layer.open({
                title: '添加信息',
                type: 1,
                content: $('#f3'),
                area: ['800px', '500px'],
            });
        });



    });
</script>

</html>